<template>
  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item">
    <n-switch class="h-label" v-model:value="component.switch">
    </n-switch>
  </n-form-item>

  <div v-if="component.switch" class="creative-component-secend-form-item">
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="childrenComponent.conversion_data_type">
      <div class='flex-1 flex'>
        <label class="text-right mr-10 text-label">数据类型</label>
        <n-radio-group v-model:value="form.conversion_data_type">
          <n-radio :key="item.value" :value="item.value" :label="item.label" v-for="item in typeOptional" />
        </n-radio-group>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="childrenComponent.conversion_target_type">
      <div class='flex-1'>
        <div class="flex">
          <label class="text-right mr-10 text-label">转化行为</label>
          <n-radio-group v-model:value="form.conversion_target_type">
            <n-radio :key="item.value" :value="item.value" :label="item.label" v-for="item in targetOptional" />
          </n-radio-group>
        </div>
        <div class="text-helper mt-5" style="margin-left: 140px">需在落地页中展示相关行为的入口，否则广告将会被审核驳回</div>
      </div>
    </n-form-item>
  </div>

</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch } from 'naive-ui';
import {
  NInput,
  NRadio,
  useMessage,
  NSpace,
  NTooltip,
  NSelect,
  NRadioGroup,
  NRadioButton,
  NFormItem,
} from 'naive-ui'
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);

const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});

const component = toRef<any, any>(props, 'component');

const childrenComponent = computed(() => component.value.children || {});
const getTextLinkComponent = computed(() => store.state.adv.modal.marketComponents["text_link"]);
const getTextLinkComponentValue = computed(() => getTextLinkComponent.value ? getTextLinkComponent.value.value : {});

if (component.value.value.conversion_data_type) {
  component.value.switch = true;
} else {
  component.value.switch = false;
}

const typeOptional = computed(() => {
  return [{
    label: '转化数据量',
    value: "CONVERSION_DATA_ADMETRIC"
  }]
});

watch(getTextLinkComponentValue, () => {
  const has = targetOptional.value.length;
  if (!has) {
    form.conversion_target_type = ''
  } else {
    // 是否存在的
    const has = targetOptional.value.find(item => item.category.includes(getTextLinkComponentValue.value.link_name_type));
    if (has) {
      form.conversion_target_type = has.value
    }

  }
})
const targetOptional = computed(() => {
  return [{
    label: '领取',
    value: 'CONVERSION_TARGET_GET',
    category: ['MORE_INFO', 'VIEW_DETAILS', 'GET_COUPONS']
  }, {
    label: '预约',
    value: 'CONVERSION_TARGET_RESERVE',
    category: ['MORE_INFO', 'VIEW_DETAILS', 'BOOK_NOW']
  }, {
    label: '购买',
    value: 'CONVERSION_TARGET_BUY',
    category: ['MORE_INFO', 'VIEW_DETAILS', 'BUY_NOW']
  }, {
    label: '申请',
    value: 'CONVERSION_TARGET_APPLY',
    category: ['MORE_INFO', 'VIEW_DETAILS', 'APPLY_NOW']
  }, {
    label: '咨询',
    value: 'CONVERSION_TARGET_CONSULT',
    category: ['MORE_INFO', 'VIEW_DETAILS', 'CONSULT_NOW']
  }, {
    label: '下载',
    value: 'CONVERSION_TARGET_DOWNLOAD',
    category: ['MORE_INFO', 'VIEW_DETAILS']
  }].filter(_ => {
    if (!getTextLinkComponentValue.value.link_name_type) return true;
    return _.category.includes(getTextLinkComponentValue.value.link_name_type)
  })
})



const form = reactive({
  conversion_data_type: component.value.value.conversion_data_type || (typeOptional.value[0] ? typeOptional.value[0].value : ''),
  conversion_target_type: component.value.value.conversion_target_type || '',

});
watch(form, () => {
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
})






</script>

<style scoped lang="scss">
@import url('./style.scss');
</style>
